<script lang="ts" setup>
import { defineProps, ref, watch } from 'vue';
import { TypographyText } from "ant-design-vue";
import router from '@/router';

// 定义接收的属性（基于修改后的字段）
const props = defineProps({
  courseId: String,
  courseName: String,
  courseDescription: String,
  courseImage: String,
  iscourseComplete: {
    type: Number,
    default: 0,
  },
  otherComplete: Boolean,
});

// 将 courseId 转换为 number 类型
const courseIdAsNumber = Number(props.courseId);

const statusMap = {
  unStarted: {
    text: '未学习',
    tooltip: '您尚未开始学习，未记录到您的线上或者线下签到状态已记录',
  },
  processing: {
    text: '正在学习',
    tooltip: '您的学习时长<90min，未记录到您的线上或者线下签到状态已记录',
  },
  finish: {
    text: '已完成学习',
    tooltip: '您已学习完成',
  },
  alreadyFinish: {
    text: '已完成学习',
    tooltip: '您的线上或者线下签到状态已记录',
  },
}
const status = ref<string>(''); // 使用 ref 定义状态
const calculateLearningStatus = () => {
  if (props.otherComplete)
    status.value = 'alreadyFinish';
  else if (props.iscourseComplete === 0)
    status.value = 'unStarted';
  else if (props.iscourseComplete === 1)
    status.value = 'processing';
  else
    status.value = 'finish';
}
watch(() => props, () => {
  calculateLearningStatus();
}, { immediate: true });
// 操作按钮的事件处理（可根据需求定义具体逻辑）
const startLearning = () => {
  router.push(`/learning/xiangqing/${courseIdAsNumber}/${courseIdAsNumber + 1}`);
};

// 鼠标移入时设置 body 背景为灰色
const handleMouseOver = () => {
  document.body.style.backgroundColor = '#f0f0f0'; // 设置灰色背景
};

// 鼠标移出时恢复 body 背景颜色
const handleMouseOut = () => {
  document.body.style.backgroundColor = ''; // 恢复默认背景颜色
};
</script>

<template>
  <div
    class="work-card"
    @click="startLearning"
    @mouseover="handleMouseOver"
    @mouseout="handleMouseOut"
  >
    <!-- 左侧图片 -->
    <img :src="courseImage" alt="课程图片" class="work-card-image">

    <!-- 右侧信息 -->
    <div class="work-card-content">
      <!-- 课程名称 -->
      <div class="work-card-title">
        {{ courseName }}
      </div>
      <!-- 课程描述 -->
      <div class="work-card-description">
        {{ courseDescription }}
      </div>
      <!-- 学习状态 -->
      <TypographyText type="secondary">
        <a-tooltip placement="bottomLeft">
          <template #title>
            <span>                {{ statusMap?.[status as keyof typeof statusMap].tooltip ?? '' }}
            </span>
          </template>
          <span :class="`status ${status}`">
            {{ statusMap?.[status as keyof typeof statusMap].text ?? '' }}
          </span>
        </a-tooltip>
      </TypographyText>
    </div>
  </div>
</template>

<style scoped lang="scss">
.work-card {
  display: flex; /* 水平排列图片和信息 */
  align-items: center;
  padding: 1rem;
  border: 1px solid #e0e0e0; /* 边框 */
  border-radius: 5%;
  margin-bottom: 0rem;
}

.work-card-image {
  width: 16vw; /* 使用相对视口宽度的单位 vw 来控制图片宽度 */
  height: 9vw; /* 使用相对视口宽度的单位 vw 来控制图片高度，确保宽高一致 */
  // max-width: 200px; /* 设置最大宽度为 200px，防止在大屏幕下过大 */
  // max-height: 200px; /* 设置最大高度为 200px，防止在大屏幕下过大 */
  object-fit: cover; /* 保持图片比例，不变形 */
  border-radius: 5%; /* 圆角 */
  margin-right: 0.5rem; /* 图片与右侧内容的间距，使用 rem 单位 */
}

/* 右侧内容样式 */
.work-card-content {
  display: flex;
  flex-direction: column;
  width: 100%; /* 右侧信息内容宽度 */
}

.work-card-title,
.work-card-description {
  text-align: left;
  margin-bottom: 0.2rem;
}
/* 标题样式 */
.work-card-title {
  font-size: 1rem;
  font-weight: bold;
}

/* 时间信息样式 */
.work-card-description {
  font-size: 1rem;
  color: #999;
}

.status {
  display: flex;
  align-items: center;
  gap: 0。5rem;
}
.status::before {
  content: '';
  display: flex;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: currentColor;
}
.unStarted {
  color: #81838F;
}

.processing {
  color: #E99D42;
}

.finish {
  color: #5ACC8F;
}

.alreadyFinish {
  color: #5ACC8F;
}
</style>
